<html>
<title>Yooo-gi-oh!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
	<style>
	a{text-decoration:none}
	*{margin:0;padding:0;}
	@font-face {
    font-family:text;
    src: url("text.ttf");
    }
	.circle
	{
		position:absolute;
		top:91px;
		left:0px;
		cursor:pointer;
		width:400px;height:400px;
		transform:rotate(90deg);
		transition:all 10s;
		-webkit-transition:all 10s;
	}

	.card
	{
		width:400px;
		height:584px;
		cursor:pointer;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%) rotateY(-60deg) rotateX(-10deg);
		transition:all 1s;
		-webkit-transition:all 2s;
		overflow:hidden;
	}

	.buttom
	{
		position:absolute;
		left:0px;
		width:350px;
		height:60px;
		font-size:60px;
		padding:10px;
		text-align:center;
		line-height:60px;
		color:#fff;
		font-family:text;
		box-sizing:content-box;
		border-radius:5px;
		cursor:pointer;
		filter:blur(2px);
		z-index:1;
		opacity:0.9;
	}
	.buttom:hover
	{
		border-left:solid 3px #fff;
		border-top:solid 3px #fff;
		border-right:solid 3px #000;
		border-bottom:solid 3px #000;
	}
	.buttom2
	{
		position:absolute;
		left:0px;
		width:350px;
		height:60px;
		font-size:60px;
		padding:10px;
		text-align:center;
		line-height:60px;
		color:#fff;
		font-family:text;
		border-radius:5px;
		cursor:pointer;
		z-index:-1;
	}

	a
	{
		text-decoration: none;
		color:#fff;
	}

	</style>
	<script type="text/javascript">
		function card_(id)
		{
			if (id==1)
			{
				var name="决斗场";
				var value="开始进行决斗";
				var img="img2/big_img/32391631.jpg";
				var color="hue-rotate(0deg)";
				document.getElementById("mu").src="img2/card_mu.png";
			}
			else if (id==2)
			{
				var name="组卡器";
				var value="修改查看自己的卡组";
				var img="img2/big_img/75500286.jpg";
				var color="hue-rotate(0deg)";
				document.getElementById("mu").src="img2/card_mu.png";
			}
			else if (id==3)
			{
				var name="商店";
				var value="使用金币购买卡包，丰富你的卡组吧！";
				var img="img2/big_img/38120068.jpg";
				var color="hue-rotate(0deg)";
				document.getElementById("mu").src="img2/card_mu.png";
			}
			else if (id==4)
			{
				var name="设置";
				var value="游戏偏好设置";
				var img="img2/big_img/30435145.jpg";
				var color="hue-rotate(0deg)";
				document.getElementById("mu").src="img2/card_mu.png";
			}
			else if (id==5)
			{
				var name="结束";
				var value="离开游戏";
				var img="img2/big_img/94192409.jpg";
				var color="hue-rotate(0deg)";
				document.getElementById("mu").src="img2/tragic.png";
			}
			document.getElementById("circle").style.transition="all 0s";
			document.getElementById("circle").style.transform="scale(1,1)";
			document.getElementById("name").innerHTML=name;
			document.getElementById("value").innerHTML=value;
			document.getElementById("circle").src=img;
			setTimeout(function(){
				document.getElementById("circle").style.transition="all 2s";
				document.getElementById("circle").style.transform="scale(0.725,0.725)";
			},1)
			document.getElementById("mu").style.filter=color;
			//document.getElementById("background").style.background="url('"+img+"')";
			//document.getElementById("background").style.backgroundSize="cover";
			//document.getElementById("background").style.backgroundPosition="center";
		}
	</script>
</head>
<body>
	<div id="load" style="position:absolute;width:100%;height:100%;background-image:radial-gradient(#e61600,#d51e1e);top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999999999;transition:all 0.2s;-webkit-transition:all 0.2s;overflow:hidden">
		<div id="logo" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15%;border-radius:25%;transition:all 0.3s">
			<svg version="1.1" id="logo1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transform:rotate(40deg);transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path1" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M104.467,114.866c2.082-1.055,4.043-2.266,5.866-3.666
						c12.355-9.492,22.662-21.808,24.467-41.867c0.556-6.177,0.153-12.274-1.066-17.4c-3.045-12.798-10.257-21.19-18.2-29.133
						c-1.649-1.649-3.342-3.207-5.066-4.733c-0.013-0.057,0.025-0.063,0.066-0.067c16.002,1.208,29.391,4.949,39,12.733
						c4.59,3.718,8.638,8.75,10.934,14.933c1.228,3.308,2.066,6.873,2.066,10.867c0,8.236-2.874,14.393-5.866,20
						c-4.496,8.425-10.46,15.406-17.667,21.133c-7.23,5.748-15.594,10.253-24.866,13.933
						C111.031,112.831,107.868,114.13,104.467,114.866z"/>
				</g>
			</svg>
			<svg version="1.1" id="logo2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transform:rotate(40deg);transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path2" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M53.067,111.267c0.686,0.124,1.25,0.557,1.866,0.867
						c9.263,4.656,19.804,8.498,32.667,9.6c14.629,1.252,27.21-2.431,37.2-7.333c10.064-4.939,18.953-11.087,26.467-18.601
						c5.572-5.572,10.043-12.479,13.533-20.267c1.197-2.67,2.342-5.395,3.334-8.2c1.084,1.811,1.619,3.957,2.267,6.066
						c1.927,6.287,3.149,13.438,3.6,21.2c0.62,10.693-0.382,21.225-3,29.733c-5.155,16.755-15.744,28.636-33.667,32.601
						c-9.604,2.124-21.114,1.355-29.8-0.8c-8.851-2.197-16.543-5.784-23.2-9.934C70.612,137.646,59.967,126.44,53.067,111.267z"/>
				</g>
			</svg>
			<svg version="1.1" id="logo3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path3" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M45.8,46.6c0.076,0.013,0.037,0.067,0,0.066 c-2.691,6.202-4.736,13.1-5.867,20.867c-1.138,7.826-1.205,17.138,0.134,24.8c2.589,14.819,8.422,27.449,15.933,37.4
					c15.29,20.257,37.168,34.188,71.467,35.2c0.229,0.108-0.224,0.273-0.4,0.399c-2.864,2.047-6.557,3.664-10.2,5
					c-3.988,1.464-8.317,2.664-12.866,3.4c-4.907,0.795-10.315,1.102-15.267,0.733c-9.945-0.739-17.805-3.776-24.667-7.8
					c-10.231-6.001-18.08-14.288-24.6-24.067C35.14,136.111,31.549,128.94,29,120.533c-2.517-8.302-4.074-18.16-3.267-28.8
					c0.746-9.825,2.972-18.453,6.533-25.934c1.725-3.624,3.679-7.147,5.867-10.4C40.331,52.132,42.819,49.099,45.8,46.6z"/>
				</g>
			</svg>
			<?xml version="1.0" standalone="yes"?>
			<svg version="1.1" id="horus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 175 150" enable-background="new 0 0 175 150" xml:space="preserve" style="position:absolute;top:0px;left:0px;transition:transform 0.7s,opacity 0.2s;opacity:0">
				<path style="fill:#fffcfc; stroke:none;" d="M88 1.42516C70.6596 3.78558 54.2801 11.7411 37 13.8156C26.3117 15.0987 16.4732 11.9644 6.01929 11.3588C2.48436 11.154 -0.223309 14.1723 2.03241 17.5679C3.50313 19.7819 6.63215 20.1012 9 20.6497C14.6962 21.9691 21.1321 23.239 27 22.9066C50.9032 21.5526 74.0454 8.01213 98 9.10417C114.488 9.85585 130.558 18.026 145 25.2469C151.564 28.5289 161.211 35.7498 168.941 33.4236C171.881 32.5391 173.805 29.503 170.677 27.4174C163.544 22.6614 154.44 19.9821 147 15.3194C129.603 4.4171 108.662 -1.38736 88 1.42516M2 23C6.08018 30.0118 16.7335 31.6009 24 33.9992C36.0154 37.965 49.252 41.5163 62 39.6998C79.7651 37.1685 96.8029 26.6249 115 28.0934C132.761 29.5266 142.668 46.0705 158 52C158.015 46.4867 159.024 42.1317 161 37C143.26 26.6457 119.956 13.957 99 13.0394C77.6923 12.1063 56.8385 22.313 36 25.561C24.3951 27.3698 13.3748 24.5317 2 23M112 70C109.906 66.9896 107.1 64.2987 105.457 61C99.8374 49.7207 110.575 43.6498 118 38C107.482 34.0609 94.3806 35.3219 85 41.5988C82.3427 43.3768 77.3729 46.3681 77.331 50.0147C77.2896 53.6244 81.4714 57.2383 84.0394 59.2392C91.69 65.2005 102.353 69.212 112 70M130 41C131.963 44.5402 134.723 47.9826 135.606 52C137.398 60.1591 131.382 67.4902 124 70C132.323 72.9851 149.509 65.2439 156 60C147.675 54.0152 139.778 44.2432 130 41M2 55L2 129L19 129C19.1963 119.487 18.9403 106.917 22.4792 98C24.5776 92.7126 28.5253 88.1975 32.2863 84.0147C40.6588 74.7031 58.4866 67.9883 61 55L2 55M59 129L167 129L167 102C167 97.5706 166.242 92.3206 167.318 88C169.171 80.5597 178.683 75.139 170.772 67.2284C163.084 59.5412 154.927 68.8544 148 72.5069C142.562 75.3742 136.073 76.9214 130 77.7106C120.2 78.9841 109.567 77.5411 100 75.3488C95.4195 74.2991 88.8428 70.8171 84.1844 71.5023C79.8239 72.1437 75.892 79.7495 73.4784 83C63.3806 96.599 55.7923 111.722 59 129M3 132L3 136L167 136L167 132L3 132M3 139L3 143L167 143L167 139L3 139M3 146L3 150L167 150L167 146L3 146z"/>
			</svg>
			<nobr><div id="YGOHorus" style="position:absolute;left:100%;top:50%;transform:translate(-50%,-50%);font-size:50px;color:#fff;opacity:0">YGO Horus</div></nobr>
		</div>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>
		<script type="text/javascript">
			$("#logo").height($("#logo").width());
			$('document').ready(function(){
				setTimeout(function(){
					document.getElementById("logo3").style.opacity=1;
				},100)
				setTimeout(function(){
					document.getElementById("logo2").style.opacity=1;
					document.getElementById("logo2").style.transform="rotate(0deg)";
				},200)
				setTimeout(function(){
					document.getElementById("logo1").style.opacity=1;
					document.getElementById("logo1").style.transform="rotate(0deg)";
				},400)
				setTimeout(function(){
					$("#logo").css({"backgroundColor":"#eee"});
					$("#path1").attr("fill","#e61600");
					$("#path2").attr("fill","#e61600");
					$("#path3").attr("fill","#e61600");
				},1500)
				setTimeout(function(){
				document.getElementById("logo1").style.opacity=0;
				document.getElementById("logo2").style.opacity=0;
				document.getElementById("logo3").style.opacity=0;
				$("#logo").css({"backgroundColor":""});
				document.getElementById("horus").style.opacity=1;
				},2500)
				setTimeout(function(){
				document.getElementById("horus").style.transform="translate(-120%,0px)";
				document.getElementById("YGOHorus").style.opacity=1;
				},3000)
				setTimeout(function(){
				document.getElementById("load").style.height="0px";
				},4000)
			})
		</script>
	</div>
	<div id="background" style="background:url('img2/big_img/24094653.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(60px) brightness(0.7);-webkit-filter:blur(60px) brightness(0.9);width:120%;height:120%;z-index:-1;position:fixed;transition:all 0.1s;left:-10%;top:-10%;"></div>
	<div id="card" class="card" onmouseover="this.style.transform='translate(-150%,-50%) rotateY(-30deg) rotateX(-10deg)'" onmouseout="this.style.transform='translate(-150%,-50%) rotateY(0deg) rotateX(0deg)'">
		<div style="position:relative;top:-28px;left:0px">
			<div style="z-index:9;position:absolute;top:0px;left:0px;">
				<img id="mu" src="img2/card_mu.png" style="position:relative;top:28px;width:400px;height:583px;border-radius:8px;filter:hue-rotate(0deg);transition:all 0.5s">
			</div>
			<img id="circle" src="img2/circle.png" class="circle" style="z-index:0;position:absolute;">
			<div id="name" style="position:absolute;top:54px;left:32px;width:336px;height:43px;z-index:9999;padding:4px;line-height:35px;font-size:35px;color:#fff;font-family:text">融合</div>
			<div id="value" style="position:absolute;top:465px;left:32px;width:330px;height:115px;z-index:999;padding:5px;font-family:text;font-size:20px;color:#000;">从自己的手卡及场上把融合怪兽卡决定的融合素材怪兽送去墓地，把那1只融合怪兽从额外卡组融合召唤。</div>
		</div>
	</div>
	<div style="position:absolute;top:50%;left:60%;transform:translate(-50%,-50%);height:584px;width:350px;"><nobr>
		<div class="buttom" style="top:0px" onmouseover="card_(1)" onclick="window.location.href='duel.html'"></div>
		<div class="buttom" style="top:126px" onmouseover="card_(2)"></div>
		<div class="buttom" style="top:252px" onmouseover="card_(3)"></div>
		<div class="buttom" style="top:378px" onmouseover="card_(4)"></div>
		<div class="buttom" style="top:504px" onmouseover="card_(5)"></div>
		<div class="buttom2" style="top:0px">决斗场</div>
		<div class="buttom2" style="top:126px">组卡器</div>
		<div class="buttom2" style="top:252px">商&#12288店</div>
		<div class="buttom2" style="top:378px">设&#12288置</div>
		<div class="buttom2" style="top:504px">结&#12288束</div>
	</nobr></div>
</body>
<script>
	window.onload=function(){
		setTimeout(function(){
		card.style.transform="translate(-150%,-50%) rotateY(0deg) rotateX(-0deg)";
		circle.style.transform="rotate(0deg)";},3000);
	}
</script>
</html>